import './App.css'
import React, { useCallback, useMemo } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import Header from '../common/Header.jsx'
import Journey from './Journey.jsx'
import DepartDate from './DepartDate.jsx'
import HighSpeed from './HighSpeed.jsx'
import Submit from './Submit.jsx'
import CitySelector from '../common/CitySelector.jsx'
import DateSelector from '../common/DateSelector.jsx'

import {
  exchangeFromTo,
  showCitySelector,
  hideCitySelector,
  fetchCityData,
  setSelectedCity,
  showDateSelector,
  hideDateSelector,
  setDepartDate,
  toggleHighSpeed
} from './actions'
import { h0 } from '../common/fp'

function App (props) {
  const {
    from,
    to,
    isCitySelectorVisible,
    isDateSelectorVisible,
    cityData,
    isLoadingCityData,
    dispatch,
    departDate,
    highSpeed
  } = props
  const onBack = useCallback(() => {
    window.history.back()
  }, [])

	/* 	const doExchangeFromTo = useCallback(() => dispatch(exchangeFromTo()), [])
	const doShowCitySelector = useCallback(m => dispatch(showCitySelector(m)), []) */

  const cbs = useMemo(() => {
    return bindActionCreators(
      {
        exchangeFromTo,
        showCitySelector
      },
      dispatch
    )
  }, [])

  const CitySelectorCbs = useMemo(() => {
    return bindActionCreators(
      { onBack: hideCitySelector, fetchCityData, onSelect: setSelectedCity },
      dispatch
    )
  }, [])
  const departDateCbs = useMemo(() => {
    return bindActionCreators(
      {
        onClick: showDateSelector
      },
      dispatch
    )
  }, [])

  const DateSelectorCbs = useMemo(() => {
    return bindActionCreators({ onBack: hideDateSelector }, dispatch)
  }, [])

  const highSpeedCbs = useMemo(() => {
    return bindActionCreators({ toggle: toggleHighSpeed }, dispatch)
  }, [])

  const onSelectDate = useCallback(day => {
    if (!day) return

    if (day < h0()) return

    dispatch(setDepartDate(day))
    dispatch(hideDateSelector())
  })

  return (
    <div>
      <div className="header-wrapper">
        <Header title="火车票" onBack={onBack} />
      </div>
      <form className="form" action="./query.html">
        <Journey
          from={from}
          to={to}
          {...cbs}
        /* 	exchangeFromTo={doExchangeFromTo}
        showCitySelector={doShowCitySelector} */
        />
        <DepartDate time={departDate} {...departDateCbs} />
        <HighSpeed {...highSpeedCbs} highSpeed={highSpeed} />
        <Submit />
      </form>
      <CitySelector
        show={isCitySelectorVisible}
        cityData={cityData}
        isLoading={isLoadingCityData}
        {...CitySelectorCbs}
      />
      <DateSelector show={isDateSelectorVisible} {...DateSelectorCbs} onSelect={onSelectDate} />
    </div>
  )
}

export default connect(
  function mapSateToProps (state) {
    return state
  },
  function mapDispatchToProps (dispatch) {
    return { dispatch }
  }
)(App)
